<template>
	<view class="fui-wrap">
		<fui-result v-if="err" type="fail" title="操作失败" :descr="err">
			<fui-button @click="$reLaunch('merchant/index')" width="400rpx" height="84rpx" text="返回主页" type="success" bold :margin="['48rpx','0','24rpx']"></fui-button>
		</fui-result>
		<view class="qrcode-box" v-else>
			<view class="pc-select" v-if="platform=='PC'" >
				<view class="title">预约类型：</view>
				<select :value="checkrules_id" @change="changeSelect" id="rules_id">
					<option v-for="(item,index) in rules" :value="item.id">{{item.title}} - 有效期{{item.online_apply_days}}天</option>
				</select>
			</view>
			<fui-form-item v-else labelWidth="500rpx" label="预约类型：" arrow>
				<fui-input readonly @click="showRules=true" :borderBottom="false" :padding="[0]" :value="checkrules.title+' - 有效期'+checkrules.online_apply_days+'天'"></fui-input>
			</fui-form-item>
			<image @longpress="downimg" :src="url" mode="widthFix"></image>
			<view class="expire">
				<fui-text text="预约申请码，长按可以下载" type="danger" size="28" fontWeight="800" style="margin-left: 10rpx;"></fui-text>
			</view>
			<view class="gocars" @click="goPushPlate">
				<fui-text text="去填写车牌入场" decoration="underline" type="primary" size="28" block fontWeight="800"></fui-text>
				<fui-icon name="pulldown-fill" color="#465CFF" style="transform: rotate(270deg);"></fui-icon>
			</view>
			<view class="goshenhe" @click="goShenhe">
				<view>
				<fui-text text="有" decoration="underline" type="primary" size="28" fontWeight="800"></fui-text>
				<fui-text :text="shenhe" decoration="underline" type="danger" size="28" fontWeight="800" :padding="['0rpx','6rpx']"></fui-text>
				<fui-text text="条申请，去审核" decoration="underline" type="primary" size="28" fontWeight="800"></fui-text>
				</view>
				<fui-icon name="pulldown-fill" color="#465CFF" style="transform: rotate(270deg);"></fui-icon>
			</view>
		</view>
		<fui-picker :fields ="['title','id']" :layer="1" :linkage="true" :options="rules" :show="showRules" @change="changePicker" @cancel="cancelPicker"></fui-picker>
		<pcfooter></pcfooter>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import pcfooter from '@/components/common/pcfooter.vue';
	export default {
		components:{
			pcfooter:pcfooter
		},
		data() {
			return {
				err:'',
				qrcode:'',
				url:'',
				expiretime:'',
				rules:[],
				checkrules:'',
				checkrules_id:'',
				showRules:false,
				shenhe:0,
				platform:''
			}
		},
		onLoad(e) {
			this.$platform();
			this.$get('merchant/car/rules').then(res=>{
				let {rules,shenhe}=res;
				this.shenhe=shenhe;
				this.rules=rules;
				this.checkrules=rules[0];
				this.checkrules_id=rules[0].id;
				this.getqrcode();
			}).catch(e=>{
				this.err=e.msg;
			});
		},
		methods: {
			...methods,
			goShenhe:function(){
				this.$redirectTo('merchant/shenhe');
			},
			getqrcode:function(){
				this.$get('merchant/car/qrcode',{rules_id:this.checkrules.id},true).then(res=>{
					this.url=res.url;
					this.qrcode=res.qrcode;
				});
			},
			changeSelect:function(e){
				let rules_id=document.getElementById('rules_id').value;
				for(let i=0;i<this.rules.length;i++){
					if(this.rules[i].id==rules_id){
						this.checkrules=this.rules[i];
						this.getqrcode();
						break;
					}
				}
			},
			changePicker:function(e){
				let id=e.value;
				for(let i=0;i<this.rules.length;i++){
					if(this.rules[i].id==id){
						this.checkrules=this.rules[i];
						this.getqrcode();
						break;
					}
				}
				this.showRules=false;
			},
			cancelPicker:function(){
				this.showRules=false;
			},
			goPushPlate:function(){
				this.$navigateTo('merchant/apply?qrcode_id='+this.qrcode.id);
			},
			downimg:function(){
				let token=uni.getStorageSync('token') || '';
				uni.downloadFile({
					url: this.url,
					success: downloadResult => {
						if (downloadResult.statusCode === 200) {
							// 下载成功，保存图片到系统相册
							uni.saveImageToPhotosAlbum({
								filePath: downloadResult.tempFilePath,
								success: () => {
									uni.showToast({
										title: '图片保存成功'
									});
								},
								fail: () => {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									});
								}
							});
						} else {
							uni.showToast({
								title: '图片下载失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '图片下载失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fui-wrap{
		background-color: #fff;
	}
	.pc-select{
		width: 500px;
		display: flex;
		justify-content: center;
		align-items: center;
		select{
			padding: 10rpx 20rpx;
			border: 1px solid #ddd;
		}
	}
	.qrcode-box{
		padding: 40rpx 0 20rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image{
			width: 400rpx;
			height: 400rpx;
			margin-top: 40rpx;
		}
		.expire{
			margin-top: 40rpx;
		}
		.gocars{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 80%;
			margin: 40rpx auto;
			margin-bottom: 20rpx;
		}
		.goshenhe{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 80%;
			margin: 0rpx auto;
		}
	}
</style>